<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vue.js tree view example</title>
		<script src="../../js/lib/vue-v2.5.13/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>

		<style>
			body {
				font-family: Menlo, Consolas, monospace;
				color: #444;
			}
			
			.item {
				cursor: pointer;
			}
			
			.bold {
				font-weight: bold;
			}
			
			ul {
				padding-left: 1em;
				line-height: 1.5em;
				list-style-type: dot;
			}
		</style>
	</head>

	<body>
		<h1>Vue.js tree view example(Vue.js 树形视图示例)</h1>
		<!-- item template -->
		<script type="text/x-template" id="item-template">
			<li>
				<div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
					{{model.name}}
					<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
				</div>
				<ul v-show="open" v-if="isFolder">
					<item class="item" v-for="model in model.children" :model="model">
					</item>
					<li class="add" @click="addChild">+</li>
				</ul>
			</li>
		</script>

		<p>(You can double click on an item to turn it into a folder.)</p>
		<p>(你可以双击一项使之变为一个文件夹.)</p>

		<!-- the demo root element -->
		<ul id="demo">
			<item class="item" :model="treeData">
			</item>
		</ul>

		<!-- demo code -->
	</body>

</html>